<!--
 * @FileDescription: 梯控 组件
 * @Author: Ronghao Zhu
 * @CreateTime: 2020/09/09 星期三
 * @LastEditors: Ronghao Zhu
 * @LastEditTime: 2020/09/09
-->

<template>
  <el-form
    ref="editForm"
    label-position="left"
    :model="rowData"
    :rules="rules"
    label-width="130px"
    @submit.native.prevent
  >
    <el-form-item prop="operCode" label="禁用时长：">
      <el-radio
        v-model="rowData.operCode"
        label="2"
        v-if="singleData.elevatorStatus === 3"
      >
        取消禁用
      </el-radio>
      <el-radio-group v-model="rowData.time">
        <el-radio label="600">禁用10分钟</el-radio>
        <el-radio label="3600">禁用1小时</el-radio>
        <el-radio label="86400">禁用1天</el-radio>
        <el-radio label="-1">永久禁用</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="禁用原因：" prop="remark">
      <el-input
        v-model.trim="rowData.remark"
        auto-complete="off"
        type="textarea"
        maxlength="500"
        rows="4"
        show-word-limit
        clearable
      ></el-input>
    </el-form-item>

    <el-form-item class="form-bottom-btns">
      <el-button @click="hideElevator()">取消</el-button>
      <el-button type="primary" @click="submitForm('editForm')">
        保存
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ElevatorForm",
  components: {},
  props: {
    hideElevator: {
      type: Function,
      required: true
    },
    singleData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        operCode: [{ required: true, message: "请选择", trigger: "change" }]
      },
      rowData: {
        dataType: 1,
        bizIds: "",
        time: "",
        remark: ""
      }
    };
  },
  watch: {
    "rowData.operCode": {
      handler(newVal, oldVal) {
        // 如果取消禁用 禁用时长不传
        if (newVal === "2") this.$set(this.rowData, "time", "");
      },
      deep: true
    },
    "rowData.time": {
      handler(newVal, oldVal) {
        // 如果传了时长 operCode要变为1-禁用 2-取消禁用
        if (newVal) this.$set(this.rowData, "operCode", "1");
      },
      deep: true
    }
  },
  created() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.rowData.bizIds = this.singleData.bizId;
          // console.log(this.rowData)
          //   return
          this.hideElevator(this.rowData);
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-radio {
  width: 100%;
  margin-right: 0;
  margin-bottom: 20px;
}
</style>
